\chapter{Visual Design}
\label{cha:konzept_visual_desgin}
In diesem Kapitel wird das \gls{front_end} und \gls{back_end} der Erweiterung in Form von \glspl{mock_up} konzipiert. 

\section[Front-End]{\gls{front_end}}
\label{sec:konzept_visual_desgin_front_end}
\subsection{Kommandozeilen Fenster}
\label{subsec:konzept_visual_desgin_kommandozeilen_fenster}
\begin{figure}[H]
   \centering
   \includegraphics[width=0.9\textwidth]{images/panel}
   \caption{Mock-Up des Kommandozeilen Fensters}
   \label{fig:mockup_panel}
\end{figure}
Das Mock-Up in \autoref{fig:mockup_panel} basiert auf dem Use Case \refusecase{uc:xcommand_run} (XCommand ausführen), der funktionalen Anforderung \reffrequirement{frq:xcommand_run} (XCommand ausführen) und der Qualitätsanforderung \refqrequirement{qrq:usability} (Usability).

Das Kommandozeilen"=Fenster wird als Overlay in eine bestehende Webseite injiziert. Es besteht im Header"=Bereich aus der Kommandozeile, in der das XCommand und allfällige Argumente eingegeben und ausgeführt werden. Aus Usability"=Gründen wird das Echo der Eingabe bereits während dem Parsen unter der Kommandozeile visualisiert. Der Content"=Bereich besteht aus zwei Spalten. In der linken Spalte werden alle installierten XCommands aufgelistet. Die Liste reduziert und expandiert sich automatisch in Abhängigkeit der Eingabe in der Kommandozeile.
Die rechte Spalte zeigt den Preview"=Bereich, in dem bereits während dem Tippen in der Kommandozeilen XCommand-spezifischer Content dargestellt werden kann.

\subsection{Infobar}
\label{subsec:konzept_visual_desgin_infobar}
\begin{figure}[H]
   \centering
   \includegraphics[width=0.9\textwidth]{images/infobar}
   \caption{Mock-Up der Infobar}
   \label{fig:mockup_infobar}
\end{figure}

Das Mock-Up in \autoref{fig:mockup_infobar} basiert auf dem Use Case \refusecase{uc:xcommand_installieren} (XCommand installieren) und der daraus abgeleiteten funktionalen Anforderung \reffrequirement{frq:xcommand_installieren} (XCommand installieren). Neben diesen Anforderungen basiert das Mock-Up auf dem Konzept aus \autoref{subsubsec:konzept_funktionssicht_installation von einer Webseite} - \nameref{subsubsec:konzept_funktionssicht_installation von einer Webseite}.

Erkennt das Content Script, dass die geladene Webseite ein XCommand anbietet, wird automatisch die Infobar in die Webseite injiziert und angezeigt. Über den Button rechts in der Infobar kann der Nutzer das XCommand installieren.

\subsection{Bestätigungsdialog"=Fenster}
\label{subsec:konzept_visual_desgin_bestaetigungs_fenster}
\begin{figure}[H]
   \centering
   \includegraphics[width=0.9\textwidth]{images/confirm}
   \caption{Mock-Up des Bestätigungs-Fensters}
   \label{fig:mockup_confirm}
\end{figure}

Das Mock-Up in \autoref{fig:mockup_confirm} erweitert das Mock-Up aus \autoref{fig:mockup_infobar} unter Berücksichtigung der Qualitätsanforderung \refqrequirement{qrq:sicherheit} (Sicherheit). Das Bestätigungsdialog"=Fenster gewährleistet, dass bei der Installation von einer Webseite der Source-Code des XCommands durch den Nutzer eingesehen werden kann. Dieser Schritt ist aus Sicherheitsgründen notwendig, damit nicht die Erweiterung, der Browser oder das Betriebssystem durch schädlichen JavaScript"=Code infiziert werden kann.
Erst nach der Bestätigung wird das XCommand in der Erweiterung installiert.

\section[Back-End]{\gls{back_end}}
\label{sec:konzept_visual_desgin_back_end}
\subsection{Einstellungsseite}
\label{subsec:konzept_visual_desgin_einstellungsseite}
\begin{figure}[H]
   \centering
   \includegraphics[width=0.9\textwidth]{images/options}
   \caption{Mock-Up der Einstellungsseite}
   \label{fig:mockup_options}
\end{figure}

Das Mock-Up in \autoref{fig:mockup_options} basiert auf den Use Cases \refusecase{uc:xcommander_verwalten}, \refusecase{uc:xcommand_installieren}, \refusecase{uc:xcommand_deinstallieren}, \refusecase{uc:xcommand_updaten}, \refusecase{uc:xcommand_deactivate} und den daraus abgeleiteten funktionalen Anforderung \reffrequirement{frq:xcommander_verwalten}, \reffrequirement{frq:xcommand_installieren}, \reffrequirement{frq:xcommand_deinstallieren}, \reffrequirement{frq:xcommand_updaten}, \reffrequirement{frq:xcommand_deactivate}. Neben diesen Anforderungen basiert das Mock-Up auf dem erarbeiteten Konzept aus \autoref{sec:konzept_funktionssicht_xcommander_erweiterung} - \nameref{sec:konzept_funktionssicht_xcommander_erweiterung}.

Die Einstellungsseite trennt über ein Tab-Register XCommand-spezifische und allgemeine Erweiterungseinstellungen voneinander. Im Register XCommand kann über ein File-Input Element ein XCommand vom lokalen Filesystem installiert werden (\vgl{\autoref{subsubsec:konzept_funktionssicht_installation_vom_lokalen_filesystem}}). Zudem werden im XCommand-Register alle installierten XCommands aufgelistet. Jedes installierte XCommand kann über eine Checkbox deaktiviert bzw. reaktiviert und über ein Button deinstalliert werden.
